<template>
    <div>
        <h3>爷爷</h3>
        <p>
            <button @click="state++">state++</button>
        </p>
        <p>{{ state }}</p>    
        <Ex25/>
    </div>
</template>



<script setup>
/**
 *   只能存在用于前后代组件：
 * 
 *   provide 和 inject 可以帮助我们解决这一问题 [1]。.
 *       一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。
 *  
 * Provide (提供)​
 *   要为组件后代提供数据，需要使用到 provide() 函数：  
 *      provide( key, value )
 *      key：提供数据的名称
 *      value：提供数据的值
 *      provide( 'message',  'hello!')
 *
 * Inject (注入)
 *      要注入上层组件提供的数据，需使用 inject() 函数：
 *      inject( key )
 *      key：提供数据的名称
 *       inject( 'message' )
 * 
 */

//爷爷组件导入父组件Ex25-baba
import Ex25 from './Ex25-baba.vue'
import { provide, ref } from 'vue'
//导入      Symbol  作为注入名
import { myFistKey } from '../common/key.js'

// Provide (提供) 这样就把数据注入到所有的后代组件中了  
//provide('message', 'hello Vue3!')

//注入响应式数据  注意这里踩坑需要重启ide不然不生效
const state  = ref(10)
provide('message', state)


//建议键值不用其他字符串直接用：使用 Symbol 作注入名   上面导入建：  在孙子组件去查看吧 
const message = ref('你好你是我的第一个键。')
provide('myFistKey', message)


</script>



<style>
    
</style>